<template>
  <div>
    <div id="container" v-if="goodsDetail[0]">
      <div class="pro_detail">
        <div class="pro_img">
          <div class="tb_booth">
            <img :src="goodsDetail[0].image_url" class="pro_middle_img" />
          </div>
        </div>
        <div class="pro_meg">
          <div class="pro_meg_hd">
            <h1>
              {{ goodsDetail[0].goods_name }}
            </h1>
          </div>
          <div class="pro_meg_price">
            <dl>
              <dt>{{ $t("i18n.cuXiao") }}</dt>
              <dd>
                <div class="promo_price">
                  <span class="tm-price">{{
                    (goodsDetail[0].price / 100) | moneyFormat
                  }}</span>
                  <b>{{ $t("i18n.youCu") }}</b>
                </div>
              </dd>
            </dl>
            <dl>
              <dt>{{ $t("i18n.socailPrice") }}</dt>
              <dd class="nor_price">
                {{ (goodsDetail[0].normal_price / 100) | moneyFormat }}
              </dd>
            </dl>
            <dl>
              <dt>{{ $t("i18n.dianYou") }}</dt>
              <dd>{{ $t("i18n.baoYou") }}</dd>
            </dl>
            <dl>
              <dt class="sale_tip">{{ goodsDetail[0].sales_tip }}</dt>
            </dl>
            <dl>
              <dt>{{ $t("i18n.promise") }}</dt>
              <dd>
                <span>{{ $t("i18n.realyPromise") }}</span>
                <span>{{ $t("i18n.tuiHuo") }}</span>
              </dd>
            </dl>
          </div>
          <div class="pro_meg_deliver">
            <dl>
              <dt>{{ $t("i18n.deliver") }}</dt>
              <dd>
                {{ $t("i18n.place") }}&nbsp;&nbsp;{{
                  $t("i18n.to")
                }}&nbsp;&nbsp;{{ $t("i18n.place") }}&nbsp;&nbsp;&nbsp;{{
                  $t("i18n.kuaiDi")
                }}:0.00
              </dd>
            </dl>
          </div>
          <div class="pro_meg_console">
            <dl class="tb-sku">
              <dt>{{ $t("i18n.Number") }}</dt>
              <dd>
                <div class="item-amout">
                  <el-input-number
                    v-model="shopNum"
                    :min="1"
                    :max="goodsDetail[0].counts"
                  ></el-input-number>
                </div>
                <span>{{ $t("i18n.local") }}</span
                ><em>{{ goodsDetail[0].counts }}</em
                ><span>{{ $t("i18n.jian1") }}</span>
              </dd>
            </dl>
            <div class="shopping_car">
              <el-button
                type="danger"
                @click.prevent="dealWithCellBtnClick(goodsDetail[0])"
                >{{ $t("i18n.joinCar") }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="pro_comment">
        <h3 class="ddd">{{ $t("i18n.goodsComponent") }}</h3>
        <div v-if="goodsDetail[0].comments_count">
          <div
            class="media"
            v-for="(comment, index) in goodsComment"
            :key="index"
          >
            <div class="media-body">
              <h6 class="media-heading" v-if="comment.user_nickname">
                {{ $t("i18n.user") }}:&nbsp;{{ comment.user_nickname }}
              </h6>
              <h6 class="media-heading" v-else>
                {{ $t("i18n.user") }}:&nbsp;{{ comment.user_name | nameFormat }}
              </h6>
              <span>{{ $t("i18n.component") }}:</span>&nbsp;{{
                comment.comment_detail
              }}
              <el-rate
                v-model="comment.comment_rating"
                disabled
                show-score
                text-color="#ff9900"
              >
              </el-rate>
            </div>
          </div>
        </div>
        <div class="media" v-else>
          <div class="media-body">
            {{ $t("i18n.noComponent") }}
          </div>
        </div>
      </div>
      <div class="pro_judge" v-if="userInfo.user_name">
        <h3>{{ $t("i18n.judgeGoods") }}</h3>
        <span>{{ $t("i18n.GoodsFen") }}</span>
        <el-rate
          v-model="rating"
          :colors="colors"
          show-score
          text-color="#ff9900"
        >
        </el-rate>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
        <el-button type="primary" @click="post()"
          >{{ $t("i18n.publish") }}<i class="el-icon-edit el-icon--right"></i
        ></el-button>
      </div>
      <div class="pro_judge" v-else>
        <h3>{{ $t("i18n.judgeGoods") }}</h3>
        <span class="judge_erro_tip">{{ $t("i18n.loginAfter") }}</span>
      </div>
      <div class="add">
        <el-collapse  accordion>
          <el-collapse-item title="相关我们" name="1">
            <div>
              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
            </div>
            <div>
              在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
            </div>
          </el-collapse-item>
          <el-collapse-item title=" 校园招聘 " name="2">
            <div>2022届应届毕业生【毕业时间在2021年9月-2022年8月之间】</div>
            <div>网申→简历筛选→在线测评→在线笔试→面试→offer→签约</div>
          </el-collapse-item>
          <el-collapse-item title="权力声明 " name="3">
            <div>
              京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。
            </div>
            <div>
              注：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。
            </div>
          </el-collapse-item>
          <el-collapse-item title="价格说明 " name="4">
            <div>
              京东价：京东价为商品的销售价，是您最终决定是否购买商品的依据。
            </div>
            <div>
              异常问题：商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="move" v-move>
        <span> 客服</span>
        <span class="el-icon-s-custom icon"> </span>
      </div>
    </div>
    <div style="text-align: center; margin-bottom: 30px">
      <div style="margin: 20px 0">
        关于我们 招贤纳士 商务合作 寻求报道 400-660-0108 kefu@csdn.net 在线客服
        工作时间 8:30-22:00
      </div>
      <div style="height: 50px">
        <div style="margin-top">
          公安备案号11010502030143 京ICP备19004658号 京网文〔2020〕1039-165号
          经营性网站备案信息 北京互联网违法和不良信息举报中心 家长监护 网
        </div>
      </div>
    </div>
    <div class="change">
      <el-button type="success" @click="change">{{
        $t("i18n.changeButton")
      }}</el-button>
    </div>
    <div class="aside" :class="{'show':this.show}" ref="aside" @click="backTop">
      <div class="el-icon-top"></div>
    </div>
  </div>
</template>

<script>
import { postComment, addGoodsToCart } from "./../../api/index";
import { MessageBox } from "element-ui";
import { mapActions } from "vuex";
import { mapState } from "vuex";

export default {
  data() {
    return {
      textarea: "",
      rating: 0,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      currentGoodsId: 0,
      shopNum: 1,
      scroll:0,
      show:false
    };
  },
  computed: {
    ...mapState(["goodsDetail", "userInfo", "goodsComment"]),

  },
  mounted() {
    window.addEventListener('scroll',()=>{
        let c=document.documentElement.scrollTop
        if(c>400){
          this.show=true
        }
         else{
            this.show=false
         }
    })
  },
  
  created() {
    this.currentGoodsId = Number(this.$route.params.id);
    this.$store.dispatch("reqGoodsDetail", {
      goodsNo: this.currentGoodsId,
    });
    this.$store.dispatch("reqGoodsComment", {
      goodsId: this.currentGoodsId,
    });
  },
  watch: {
    $route() {
      this.currentGoodsId = Number(this.$route.params.id);
      this.$store.dispatch("reqGoodsDetail", {
        goodsNo: this.currentGoodsId,
      });
      this.$store.dispatch("reqGoodsComment", {
        goodsId: this.currentGoodsId,
      });
      // 请求当前用户信息
      this.$store.dispatch("getUserInfo");
    },
  },
  methods: {
    // 返回顶部
    backTop(){
      var Time=setInterval(()=>{
      let top= document.documentElement.scrollTop
      let spead =Math.floor(-top/6)
      if(spead ==0) clearInterval(Time)
    document.documentElement.scrollTop= top +spead
      },20)
    },

    // 切换语言
    change() {
      console.log(this.goodsComment);
      this.$i18n.locale = this.$i18n.locale == "zh" ? "Eng" : "zh";
    },
    async post() {
      if (!this.textarea) {
        MessageBox({
          type: "info",
          message: "评论不得为空",
          showClose: true,
        });
        return;
      }
      let result = await postComment(
        this.goodsDetail[0].goods_id,
        this.textarea,
        this.rating,
        this.userInfo.id
      );
      if (result.success_code === 200) {
        MessageBox({
          type: "success",
          message: "发布成功",
          showClose: true,
        });
        this.textarea = "";
        this.$store.dispatch("reqGoodsComment", {
          goodsId: this.currentGoodsId,
        });
      } else {
        MessageBox({
          type: "info",
          message: "发布失败",
          showClose: true,
        });
      }
    },
    // 监听商品点击
    async dealWithCellBtnClick(goods) {
      // 1. 发送请求
      // user_id, goods_id, goods_name, thumb_url, price, buy_count, counts
      if (this.userInfo.user_name) {
        let result = await addGoodsToCart(
          this.userInfo.id,
          goods.goods_id,
          goods.short_name,
          goods.thumb_url,
          goods.price,
          this.shopNum,
          goods.counts
        );
        if (result.success_code === 200) {
          MessageBox({
            type: "success",
            message: result.message,
            showClose: true,
          });
          let user_id = this.userInfo.id;
          // 请求商品数据
          this.$store.dispatch("reqCartsGoods", { user_id });
          this.shopNum = 1;
        }
      }
    },
  },
};
</script>

<style scoped>
.aside {
  width: 50px;
  height: 50px;
  position: fixed;
  border-radius: 50%;
  font-size: 30px;
  bottom: 10%;
  font-weight: 800;
  text-align: center;
  line-height: 50px;
  right: 4%;
  display: none;
  background-color: #F2F2F2;
}
.aside:hover{
  background-color: red;
}
.show{
  display: block;
}
.el-collapse-item {
  text-align: center;
}
.add {
  width: 73%;
  position: relative;
  margin: 0 auto;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 50px;
  border-top: none;
}
.icon {
  font-size: 30px;
}
.move {
  position: absolute;
  width: 70px;
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f2f2f2;
  top: 50%;
  left: 95%;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  z-index: 22000;
  transform: translate(-50%, -50%);
}
.change {
  position: absolute;
  left: 7%;
  top: 10%;
}

#container > .pro_detail {
  width: 990px;
  position: relative;
  z-index: 100;
  margin: 20px auto;
}
#container > .pro_comment {
  width: 73%;
  position: relative;
  background-image: radial-gradient(
    rgba(255, 230, 0, 0.185),
    rgba(0, 195, 255, 0.151)
  );
  margin: 40px auto 10px;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  border-bottom: none;
}
#container > .pro_judge {
  width: 73%;
  position: relative;
  margin: 0 auto 20px;
  padding: 20px;
  background-image: radial-gradient(
    rgba(255, 230, 0, 0.185),
    rgba(0, 195, 255, 0.151)
  );

  border-top: none;
  border: 1px solid #ccc;
}
.pro_judge > span {
  font-size: 12px;
  color: #ccc;
}
.pro_judge > .el-rate {
  display: inline-block;
}
.pro_judge .el-textarea {
  width: 50%;
  display: block;
  margin: 20px 0;
}
.pro_comment > h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.pro_comment .media {
  border-top: 1px dashed #ccc;
  border-radius: 10px;
  margin: 4px 0;
  background-color: rgba(255, 0, 0, 0.116);
  padding: 10px 10px;
}
.pro_comment .media .media-heading {
  margin-bottom: 10px;
  font-weight: bolder;
}
.pro_comment .media .media-body {
  font-size: 14px;
}
.pro_comment .media .media-body span {
  font-weight: bolder;
}
.pro_comment .el-rate {
  display: inline-block;
  margin-left: 20px;
}
.pro_judge > h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
.pro_judge .judge_erro_tip {
  font-size: 15px;
  font-weight: bolder;
  color: #000;
}
.pro_detail > .pro_img {
  float: left;
  position: relative;
  padding: 100px 0;
  width: 480px;
  background-image: radial-gradient(
    rgba(255, 230, 0, 0.185),
    rgba(0, 195, 255, 0.151)
  );
  border: 1px solid blue;

  border-radius: 10px;
}
.pro_img > .tb_booth {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}
.tb_booth > .pro_middle_img {
  width: 100%;
  height: 100%;
}
.pro_detail > .pro_meg {
  margin: 0 0 0 520px;
  color: #666;
  border-radius: 10px;
  border: 2px solid #ffebc1;
  background-image: radial-gradient(
    rgba(255, 230, 0, 0.185),
    rgba(0, 195, 255, 0.151)
  );
  padding: 15px 0;
}
.pro_meg > .pro_meg_hd {
  padding: 0 10px 12px;
  color: #000;
}
.pro_meg_hd > h1 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.pro_meg > .pro_meg_price {
  padding: 5px 20px;
  height: 200px;
  background-color: rgba(247, 244, 244, 0.6);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.pro_meg_price dl {
  display: flex;
  align-items: center;
  height: 20px;
  line-height: 20px;
  margin-bottom: 0 !important;
  cursor: pointer;
}
.pro_meg_price dl dt {
  width: 100px;
  color: #999;
  font-size: 12px;
}
.pro_meg_price dl dd {
  margin-bottom: 0 !important;
  font-family: Arial;
}
.pro_meg_price dl dd div {
  display: flex;
  align-items: center;
}
.pro_meg_price dl:last-child dd {
  color: #ff0036;
  font-weight: bold;
  font-size: 12px;
}
.promo_price {
  line-height: 24px;
  vertical-align: middle;
  color: #ff0036;
  font-size: 18px;
  font-family: Arial;
  -webkit-font-smoothing: antialiased;
}
.promo_price b {
  display: inline-block;
  font-weight: normal;
}
.promo_price b:last-child {
  font-size: 12px;
  background: #f47a86;
  color: white;
  padding: 0 6px;
}
.promo_price > .tm-price {
  font-size: 20px;
  display: inline-block;
  margin-right: 12px;
  font-weight: bold;
}
.nor_price {
  text-decoration: line-through;
}
.sale_tip {
  color: #ff0036 !important;
  font-weight: bolder;
  width: 80px !important;
}
.pro_meg_deliver {
  margin: 5px 20px -15px 0;
  padding: 5px;
}
.pro_meg_deliver dl {
  padding: 5px;
  font-size: 14px;
  color: black;
  cursor: pointer;
}
.pro_meg_deliver dl dt {
  color: #999;
  font-size: 14px;
  text-align: left;
  width: 69px;
  margin: 0 0 0 8px;
  float: left;
}
.pro_meg_deliver dl dd {
  font-size: 13px;
}
.pro_meg_console {
  margin: 5px 20px 5px 0;
  padding: 5px;
}
.tb-sku {
  padding: 5px;
  font-size: 14px;
  color: black;
  cursor: pointer;
}
.tb-sku dt {
  color: #999;
  font-size: 14px;
  text-align: left;
  width: 69px;
  margin: 0 0 0 8px;
  float: left;
}
.tb-sku dd {
  font-size: 13px;
  height: 20px;
  line-height: 20px;
}
.tb-sku dd div {
  display: inline-block;
  margin-right: 20px;
}
.item-amout {
  height: 25px;
}
.item-amout a {
  display: inline-block;
  height: 23px;
  width: 17px;
  border: 1px solid #e5e5e5;
  background: #f0f0f0;
  text-align: center;
  line-height: 23px;
  color: #444;
  cursor: pointer;
}
.item-amout a:hover {
  color: #f50;
  border-color: #f60;
}
.item-amout > .text_amount {
  width: 40px;
  height: 20px;
  text-align: center;
  display: inline-block;
}
.shopping_car {
  margin: 20px auto 0;

  display: flex;
  justify-content: center;
}
.shopping_car button {
  outline: none;
}
</style>
